<template>
  <view>
    <view class="flex-col justify-start page">
  <view class="flex-col section">
    <view class="flex-col self-stretch group">
      <view class="flex-row justify-between self-stretch group_2">
        <image
          class="image"
          src="/static/bk1.png"
        />
        <view class="flex-col justify-start section_2">
          <view class="flex-col justify-start section_3">
            <view class="flex-row justify-center items-center section_4">
              <image
                class="image_2"
                src="/static/images/about/1.png"
              />
              <text class="ml-4 font text">自定义</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-row items-start self-stretch group_3">
        <image
          class="image_3"
          src="/static/mie/4.png"
        />
        <image
          class="ml-6 image_3 image_4"
          src="/static/mie/5.png"
        />
      </view>
      <view class="flex-row items-center self-center group_4">
        <text class="text_2">小绵羊</text>
        <image
          class="ml-2 shrink-0 image_5"
          src="/static/ding.png"
        />
      </view>
      <view class="flex-col justify-start self-stretch section_5">
        <view class="flex-col justify-start relative section_6">
          <view class="section_7"></view>
          <view class="flex-row justify-between items-center pos">
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_6"
                src="/static/avatar/书本女孩.png"
              />
              <text class="ml-8 font">海绵宝宝超绝啤酒肚</text>
            </view>
            <image
              class="image_7"
              src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=9fcbfeba59586c5557d98af535380c41.png"
            />
          </view>
          <text class="font text_3 pos_2">
            我是卡了崩吧搜啊咖啡店科技垃圾可=两点开始1看了下参考破伤风久啊实打实打开弟哦啊的卡死了解付款码卢卡申科当面老师的凯撒离开达萨罗我是卡了崩吧搜啊咖啡店科技垃圾可我是卡了崩吧搜啊咖啡店科技垃圾可=两点开始1看了下参考破伤风久啊实打实打开弟哦啊的卡死了解付款码卢卡申科当面老师的凯撒离开达萨罗我是卡了崩吧搜啊咖啡店科技垃圾可我是卡了崩吧搜啊咖啡店科技垃圾可=两点开始1看了下参考破伤风久啊实打实打开弟哦啊
          </text>
        </view>
      </view>
    </view>
    <view class="mt-6 flex-col justify-start self-center section_8">
      <view class="flex-col justify-start items-center text-wrapper"><text class="text_4">选择Ta</text></view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 368rpx;
  background-color: #fefff9;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding-left: 32rpx;
  padding-bottom: 96rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=f6b7e7101ae5b8fa405073e2c5f1e7c7.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
}
.group {
  padding: 100rpx 0;
}
.group_2 {
  margin-right: 32rpx;
}
.image {
  margin: 4rpx 0;
  width: 54rpx;
  height: 54rpx;
}
.section_2 {
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=b74f6dfcd36adfda1e9936e2b0641d88.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 178rpx;
  height: 60rpx;
}
.section_3 {
  background-color: #ffffff;
  border-radius: 120rpx;
  width: 172rpx;
}
.section_4 {
  padding: 10rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=ee71b907df7d409644b34d2289521a8e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_2 {
  width: 36rpx;
  height: 36rpx;
}
.group_3 {
  padding-left: 92rpx;
}
.image_3 {
  flex: 1 1 444rpx;
  height: 444rpx;
}
.image_4 {
  margin-right: -274rpx;
  margin-top: 20rpx;
}
.group_4 {
  margin-top: 28rpx;
}
.text_2 {
  color: #ffffff;
  font-size: 56rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 52.76rpx;
  text-shadow: 0 2rpx #333333, 0 -2rpx #333333, 2rpx 0 #333333, -2rpx 0 #333333, 2rpx 2rpx 0rpx #333333;
}
.image_5 {
  width: 44rpx;
  height: 44rpx;
}
.section_5 {
  margin: 28rpx 42rpx 0 8rpx;
  padding: 4rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=efcd409bcbefc0d9e74f7337ffe581ca.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_6 {
  margin: 0 4rpx;
  background-color: #ffffff;
  border-radius: 48rpx 48rpx 40rpx 48rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=7f7b74abb7b207e80c79715ab17f9800.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_7 {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=7f7b74abb7b207e80c79715ab17f9800.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 568rpx;
}
.pos {
  position: absolute;
  left: 35rpx;
  right: 36rpx;
  top: 25rpx;
}
.image_6 {
  border-radius: 50%;
  width: 62rpx;
  height: 62rpx;
}
.font {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 26.38rpx;
  color: #333333;
}
.text {
  line-height: 26.3rpx;
}
.image_7 {
  width: 28rpx;
  height: 28rpx;
}
.text_3 {
  line-height: 42rpx;
  text-align: justify;
}
.pos_2 {
  position: absolute;
  left: 36.9rpx;
  right: 35.1rpx;
  top: 107.32rpx;
}
.section_8 {
  padding: 4rpx 0;
  border-radius: 48rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=a872e01374d61f859651f7cdb331ad6a.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 472rpx;
}
.text-wrapper {
  padding: 36rpx 0 28rpx;
  background-color: #ffe944;
  border-radius: 74rpx;
  width: 470rpx;
}
.text_4 {
  color: #333333;
  font-size: 40rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 37.96rpx;
}
</style>
    
      